<template>
  <div class="carAppeal">
    <c-title :hide="false" :text="page_name"></c-title>
    <div class="appealBox">
      <!-- 特种车辆申请 -->
      <template v-if="this.$route.name == 'carAppeal_special_apply'">
        <van-cell-group>
          <van-cell title="车牌号" is-link title-style="text-align: left;" @click="tapSelect_Car">
            <template #default>
              <span>{{ radio ? radio_m : "请选择" }}</span>
            </template>
          </van-cell>
          <van-cell :title="tip_one" title-style="text-align: left;">
            <template #label>
              <div class="leftBox">
                <!-- <span>涉及隐私信息请打码</span> -->
                <div class="upload">
                  <div class="img_box" v-for="(item, ind) in specialForm.work_license_imgs" :key="ind">
                    <img :src="item" alt="" />
                    <div class="delete" @click.stop="delImg('specialForm', 'work_license_imgs', ind)"></div>
                    <i class="iconfont icon-icon_close" @click.stop="delImg('specialForm', 'work_license_imgs', ind)"></i>
                  </div>
                  <div class="upload_tap_box">
                    <van-icon name="plus" size="30" color="#D6D6DC" />
                    <van-uploader :after-read="multipleMethod_1" multiple>
                      <div class="isupload"></div>
                    </van-uploader>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
          <van-cell :title="tip_two" title-style="text-align: left;">
            <template #label>
              <!-- <span>车辆非本人，请增加结婚证或户口本，涉及隐私信息请打码</span> -->
              <div class="leftBox">
                <div class="upload">
                  <div class="img_box" v-for="(item, ind) in specialForm.driving_license_imgs" :key="ind">
                    <img :src="item" alt="" />
                    <div class="delete" @click.stop="delImg('specialForm', 'driving_license_imgs', ind)"></div>
                    <i class="iconfont icon-icon_close" @click.stop="delImg('specialForm', 'driving_license_imgs', ind)"></i>
                  </div>
                  <div class="upload_tap_box">
                    <van-icon name="plus" size="30" color="#D6D6DC" />
                    <van-uploader :after-read="multipleMethod_2" multiple>
                      <div class="isupload"></div>
                    </van-uploader>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </template>
      <!-- 车辆申诉 -->
      <template v-else>
        <van-cell-group>
          <van-field v-model="carAppealForm.mobile" label="手机号" placeholder="请输入手机号" />
          <van-field v-model="carAppealForm.license_no" label="车牌号" placeholder="请输入车牌号" />
          <van-cell title="身份证" title-style="text-align: left;">
            <template #label>
              <div class="leftBox">
                <span>单位车辆需提供身份证+营业执照</span>
                <div class="upload">
                  <div class="img_box" v-for="(item, ind) in carAppealForm.idcard_imgs" :key="ind">
                    <img :src="item" alt="" />
                    <div class="delete" @click.stop="delImg('carAppealForm', 'idcard_imgs', ind)">
                      <i class="iconfont icon-icon_close"></i>
                    </div>
                  </div>
                  <div class="upload_tap_box">
                    <van-icon name="plus" size="30" color="#D6D6DC" />
                    <van-uploader multiple :after-read="multipleMethod_1">
                      <div class="isupload"></div>
                    </van-uploader>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
          <van-cell title="行驶证" title-style="text-align: left;">
            <template #label>
              <div class="leftBox">
                <div class="upload">
                  <div class="img_box" v-for="(item, ind) in carAppealForm.driving_permit_imgs" :key="ind">
                    <img :src="item" alt="" />
                    <div class="delete" @click.stop="delImg('carAppealForm', 'driving_permit_imgs', ind)">
                      <i class="iconfont icon-icon_close"></i>
                    </div>
                  </div>
                  <div class="upload_tap_box">
                    <van-icon name="plus" size="30" color="#D6D6DC" />
                    <van-uploader multiple :after-read="multipleMethod_2">
                      <div class="isupload"></div>
                    </van-uploader>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </template>
    </div>
    <div class="bottom_btn set-pc-style">
      <div class="btn" @click="confirmTap">提交</div>
    </div>
    <!-- :style="{ height: '50%' }" -->
    <van-popup v-model="popupShow" round position="bottom" :style="{ height: '40%' }">
      <van-nav-bar title="选择车牌号" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <span style="color: #999999;">取消</span>
        </template>
      </van-nav-bar>
      <div class="radioSelect">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell :title="item.license_no" clickable @click="radio = item.id" title-style="text-align: left;" v-for="item in car_list" :key="item.id">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div v-if="page < total_page" style="text-align: center;" @click="getCarListMore">点击加载更多</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      cardImage: [],
      popupShow: false,
      radio: "",
      carAppealForm: {
        mobile: "",
        license_no: "",
        source: "",
        idcard_imgs: [],
        driving_permit_imgs: []
      },
      specialForm: {
        car_id: "",
        group_id: "",
        driving_license_imgs: [],
        work_license_imgs: []
      },
      tip_one: "",
      tip_two: "",
      car_list: [],
      page_name: "特殊车辆申请",
      isclick: false,

      page: 1,
      total_page: 0
    };
  },
  activated() {
    if (this.$route.name == "carAppeal_special_apply") {
      this.popupShow = false;
      this.getGroupDetail();
    } else {
      this.page_name = "车辆申诉";
    }
  },
  computed: {
    radio_m() {
      let name = "请选择";
      for (let i = 0; i < this.car_list.length; i++) {
        if (this.car_list[i].id == this.radio) {
          name = this.car_list[i].license_no;
          break;
        }
      }
      return name;
    }
  },
  methods: {
    delImg(arrayKey, key, index) {
      if (arrayKey == "specialForm") {
        this.specialForm[key].splice(index, 1);
      } else {
        this.carAppealForm[key].splice(index, 1);
      }
    },
    confirmTap() {
      if (this.isclick) return;
      this.isclick = true;
      if (this.$route.name == "carAppeal_special_apply") {
        // 特殊车辆申请
        this.special_apply();
      } else {
        // 申诉请求
        this.carAppealSave();
      }
    },
    async getCarList() {
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.apply.get-car-list", { page: this.page }, "");
      if (result) {
        this.car_list = data.data;
        this.total_page = data.last_page;
        this.popupShow = true;
      } else {
        this.$toast(msg);
      }
    },
    async getCarListMore() {
      if (this.page >= this.total_page) return;
      this.page = this.page + 1;
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.apply.get-car-list", { page: this.page }, "");
      if (result) {
        this.car_list = this.car_list.concat(data.data);
      } else {
        this.page = this.page - 1;
        this.$toast(msg);
      }
    },
    async getGroupDetail() {
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.apply.group-details", { group_id: this.$route.params.group_id }, "");
      if (result) {
        this.tip_one = data.tip_one;
        this.tip_two = data.tip_two;
        this.page_name = data.group_name;
        this.fun.setWXTitle(data.group_name);
      } else {
        this.$toast(msg);
      }
    },
    async special_apply() {
      let json = {
        data: {
          car_id: this.radio,
          group_id: this.$route.params.group_id,
          driving_license_imgs: this.specialForm.driving_license_imgs,
          work_license_imgs: this.specialForm.work_license_imgs
        }
      };
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.special.apply", json, "");
      console.log(data, msg, result);
      if (result) {
        this.$toast(msg);
        setTimeout(() => {
          this.$router.push(this.fun.getUrl("special_vehicles", {}));
          this.isclick = false;
        }, 500);
      } else {
        this.isclick = false;
        this.$toast(msg);
      }
    },
    async carAppealSave() {
      let json = {
        data: {
          mobile: this.carAppealForm.mobile,
          license_no: this.carAppealForm.license_no,
          source: this.$route.params.source,
          idcard_imgs: this.carAppealForm.idcard_imgs,
          driving_permit_imgs: this.carAppealForm.driving_permit_imgs
        }
      };
      let { data, msg, result } = await $http.post("plugin.car-manage.frontend.controllers.appeal.index.appeal", json, "");
      console.log(data, msg, result);
      if (result) {
        this.$toast(msg);
        setTimeout(() => {
          this.$router.push(this.fun.getUrl("member", {}));
          this.isclick = false;
        }, 500);
      } else {
        this.isclick = false;
        this.$toast(msg);
      }
    },
    tapSelect_Car() {
      this.page = 1;
      this.total_page = 1;
      this.getCarList();
    },
    onClickLeft() {
      this.popupShow = false;
      this.radio = "";
      this.page = 1;
      this.total_page = 0;
    },
    onClickRight() {
      this.popupShow = false;
      this.page = 1;
      this.total_page = 0;
    },
    // 判断多图上传，循环onRead_1方法
    multipleMethod_1(e, flag) {
      if (e && e.length) {
        for (let i = 0; i < e.length; i++) {
          this.onRead_1(e[i], flag);
        }
      } else {
        this.onRead_1(e, flag);
      }
    },
    multipleMethod_2(e, flag) {
      if (e && e.length) {
        for (let i = 0; i < e.length; i++) {
          this.onRead_2(e[i], flag);
        }
      } else {
        this.onRead_2(e, flag);
      }
    },
    onRead_2(e, flag) {
      Toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      if (flag === true) {
        fd.append("file", e);
      } else {
        fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      }
      axios
        .post(this.fun.getRealUrl("upload.uploadPic", {}), fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result === 1) {
            Toast.clear();
            if (this.$route.name == "carAppeal_special_apply") {
              this.specialForm.driving_license_imgs.push(responseData.data.img_url);
            } else {
              this.carAppealForm.driving_permit_imgs.push(responseData.data.img_url);
            }
          } else {
            Toast.clear();
            Toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
          Toast.clear();
        });
    },
    // vant 多图片上传
    onRead_1(e, flag) {
      Toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      if (flag === true) {
        fd.append("file", e);
      } else {
        fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      }
      axios
        .post(this.fun.getRealUrl("upload.uploadPic", {}), fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result === 1) {
            Toast.clear();
            if (this.$route.name == "carAppeal_special_apply") {
              this.specialForm.work_license_imgs.push(responseData.data.img_url);
            } else {
              this.carAppealForm.idcard_imgs.push(responseData.data.img_url);
            }
          } else {
            Toast.clear();
            Toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
          Toast.clear();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.bottom_btn {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffffff;
  padding: 0.63rem 0.75rem;
  .btn {
    height: 2.5rem;
    background: #f15353;
    border-radius: 1.28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.94rem;
    color: #ffffff;
  }
}
.appealBox {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
  padding-bottom: 5rem;
  box-sizing: border-box;

  .van-cell__label {
    margin-top: 0;
  }
  .leftBox {
    font-size: 0.75rem;
    color: #aaaab3;
    text-align: left;

    .upload {
      margin-top: 0.75rem;
      display: flex;
      flex-wrap: wrap;
      .img_box {
        width: 6.16rem;
        height: 6.16rem;
        background: #f8f8f8;
        margin-right: 0.5rem;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        position: relative;
        .icon-icon_close {
          position: absolute;
          right: 0.2rem;
          font-size: 0.625rem;
          color: #ffffff;
        }
        .delete {
          position: absolute;
          right: 0;
          top: 0;
          width: 1.25rem;
          height: 1.13rem;
          border-radius: 0rem 0.5rem 0rem 0.5rem;
          background: #000;
          opacity: 0.3;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        img {
          width: 6.16rem;
          height: 6.16rem;
          border-radius: 0.5rem;
        }
      }
      .img_box:nth-child(3n) {
        margin-right: 0;
      }
      .upload_tap_box {
        width: 6.16rem;
        height: 6.16rem;
        background: #f8f8f8;
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: 0.5rem;
        .van-uploader {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          opacity: 0;
          .isupload {
            width: 6.56rem !important;
            height: 6.56rem !important;
          }
        }
      }
    }
  }
}
</style>
